<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="8">
        <div class="grid-content bg-purple">
          <!-- 首页user信息 -->
          <el-card shadow="hover">
            <div class="userCard">
              <el-avatar :size="100" :src="imgUrl1"></el-avatar>
              <div class="userInfo">
                <p class="important-font">Hello,Admin</p>
                <p class="secondary-font" style="margin: 0">
                  今天天气晴朗，气温在15℃至25℃之间，美好的一天
                </p>
              </div>
            </div>
            <div class="my-info">
              <p>有志者事竟成</p>
            </div>
            <div class="zx">
              <p>——Mr.Xie</p>
            </div>
          </el-card>
        </div>
      </el-col>
      <el-col :span="16">
        <div class="grid-content bg-purple">
          <el-card shadow="always" style="height:210px">
            <div>
                <p class="important-font" style="text-align:left;margin-bottom:25px"><img src="../assets/redflag.jpg" alt="" />欢迎使用 海报设计系统</p>
                <p class="secondary-font" style="text-decoration: none;">这是一款爆好用的海报设计模板！！！</p>
            </div>
          </el-card>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
 
<script>
import * as echarts from "echarts";

export default {
  name: "Index",
  data() {
    return {
      imgUrl1: require("../assets/tx.jpg"),
      imgUrl2: require("../assets/redflag.jpg"),
    };
  },
  methods: {
    
option = {
    textStyle: {
        fontSize: 20,   // 调节字体大小
        
    },
    title : {
        text: '',       // 主标题名称
        subtext: '',    // 副标题名称
        x:'center'      // 标题的位置
    },
    tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    legend: {
        orient: 'vertical',         // 标签名称垂直排列
        x: 'right',                 // 标签的位置
        data:['不能坚持健身','偏好其他健身场所','健身房价格太贵',
'部分健身房有强行推销的行为','健身房空气不流通','健身房人多繁杂','对市面上的健身房都不满意']
    },                              // 标签变量名称
    toolbox: {
        show : true,
        feature : {
            mark : {show: true},
            dataView : {show: true, readOnly: false},
            magicType : {
                show: true,
                type: ['pie', 'funnel']
            },
            restore : {show: true},
            saveAsImage : {show: true}          // 保存图片
        }
    },
    calculable : true,
    series : [
        {
            name:'面积模式',                    // 图表名称
            type:'pie',                         // 图表类型
            radius : [30, 200],                 // 图表内外半径大小
            center : ['50%', '50%'],            // 图表位置
            roseType : 'area',
            label: {
                normal: {
                    show: true,
                    formatter: '{b}({d}%)'      // 显示百分比
                }
            },
            data:[
                {value:180, name:'不能坚持健身'},           // 变量对应的具体数据
                {value:180, name:'偏好其他健身场所'},
                {value:165, name:'健身房价格太贵'},
                {value:151, name:'部分健身房有强行推销的行为'},
                {value:97, name:'健身房空气不流通'},
                {value:81, name:'健身房人多繁杂'},
                {value:29, name:'对市面上的健身房都不满意'}
            ]
        }
    ]
}

    
  },
};
</script>
 

<style  scoped>
.el-card__body {
  padding: 10px;
}
.userCard {
  height: 120px;
  display: flex;
  border-bottom: 2px solid #dcdfe6;
  border-radius: 2px;
}
.userInfo {
  width: auto;
  padding: 0 0 0 6%;
  text-align: left;
}
.important-font {
  font-weight: 900;
  font-size: 25px;
}
.secondary-font {
  font-size: 12px;
  color: #909399;
  text-align: left;
}
.my-info {
  height: 10px;
  text-align: left;
  color: #909399;
  font-size: 14px;
}

.zx {
  font-size: 14px;
  text-align: right;
  color: #909399;
}
.tableInfo {
  margin: 20px 0 0 0;
}
.OrderCard {
  margin: 0 0 30px 30px;
  border: #dcdfe6 1px solid;
  border-radius: 10px;
  i {
    width: 30%;
    line-height: 120px;
    font-size: 30px;
    color: #fff;
  }
  div {
    width: 300px;
  }
}
.el-card {
  border: none;
}
.num {
  display: flex;
  flex-wrap: wrap;
}
.graph {
  margin: 15px 0 0 0;
}

::v-deep .el-card__body,
.el-main {
  padding-bottom: 0;
}
</style>